<template>
  <div>
    <el-dialog
      title="修改工单"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      :modifyData="modifyData"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="600px"
    >
      <div class="titleName">
        <p>{{ modifyData.device_name }}</p>
        <span>({{ modifyData.device_number }})</span>
      </div>
      <div class="messageBox">
        <div>
          <div>
            <span class="detailTitle">工单编号</span><span>{{ modifyData.order_no }}</span>
          </div>
          <div>
            <span class="detailTitle">所属公司</span><span>{{ modifyData.customer_name }}</span>
          </div>
        </div>
        <div>
          <div>
            <span class="detailTitle">工单来源</span><span>{{ modifyData.source }}</span>
          </div>
          <div>
            <span class="detailTitle">工单状态</span><span>{{ modifyData.status }}</span>
          </div>
        </div>
      </div>
      <el-form :model="modifyRuleForm" :rules="modifyRules" ref="modifyRuleForm" label-width="100px" class="ruleForm">
        <el-form-item :label="modifyData.order_type === 1 ? '故障描述' : '保养说明'" prop="FaultDescription">
          <el-input
            v-model="modifyRuleForm.description"
            placeholder="请输入内容"
            type="textarea"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="现场图片">
          <div :class="{ noneBtn: fiveMore, showBtn: fiveLess }">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleBeforeUpload"
              :http-request="httpRequest"
              :file-list="imgList"
              :limit="5"
            >
              <i class="el-icon-plus"></i>
            </el-upload>

            <el-dialog :visible.sync="dialogImg" :modal="false" width="30%">
              <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="现场联系人" prop="contacts">
          <el-input v-model="modifyRuleForm.contacts" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contacts_tel">
          <el-input v-model="modifyRuleForm.contacts_tel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="设备地址" prop="address">
          <el-input v-model="modifyRuleForm.address" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="project_contract" v-if="modifyRuleForm.project_contract !== 0">
          <el-input v-model="modifyRuleForm.project_contract" disabled placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:show', false)">取 消</el-button>
        <el-button type="primary" @click="submitModifyOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateOrder, getDeviceLastProject } from '@/api/orderManage';
import { uploadFile } from '@/api/knowledgeBaseApi.js';
export default {
  data() {
    return {
      visible: this.show,
      modifyRuleForm: {
        description: '',
        contacts: '',
        contacts_tel: '',
        address: '',
        project_contract: ''
      },
      dialogImg: false,
      fiveLess: true,
      fiveMore: false,
      modifyRules: {
        contacts: [{ required: true, message: '请输入现场联系人', trigger: 'blur' }],
        contacts_tel: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: '联系电话输入错误'
          }
        ]
      },
      dialogImageUrl: '',
      imgList: []
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    modifyData: {
      type: Object
    }
  },
  watch: {
    show() {
      this.visible = this.show;
      this.modifyRuleForm.contacts = this.modifyData.contacts;
      this.modifyRuleForm.description = this.modifyData.description;
      this.modifyRuleForm.contacts_tel = this.modifyData.contacts_tel;
      this.modifyRuleForm.address = this.modifyData.address;
      console.log(this.modifyData, '<<<<');

      getDeviceLastProject({ device_id: this.modifyData.device_id }).then(res => {
        console.log(res.data.contacts);
        this.modifyRuleForm.project_contract = res.data.contacts;
      });
      this.fiveLess = true;
      this.fiveMore = false;
      this.imgList = [];
      this.imgList = this.modifyData.imgList;
      if (this.imgList.length > 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }
      // for (let i in this.modifyData.imgList) {
      //   this.imgList[i] = {};
      //   this.imgList[i].url = this.modifyData.imgList[i];
      // }
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImg = true;
    },
    //提交修改表单
    submitModifyOrder() {
      let params = {};
      params.address = this.modifyRuleForm.address;
      params.contacts = this.modifyRuleForm.contacts;
      params.contacts_tel = this.modifyRuleForm.contacts_tel;
      params.description = this.modifyRuleForm.description;
      params.id = this.modifyData.id;
      params.photos = [];
      console.log(params);
      this.imgList.forEach(res => {
        params.photos.push(res.url);
      });
      this.$refs.modifyRuleForm.validate(valid => {
        if (!valid) return;
        updateOrder(params).then(res => {
          if (res.message === '204') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            console.log('成功关闭');
            this.$emit('sonClick', 'success');
            this.visible = false;
          }
        });
      });
    },
    //图片删除
    handleRemove(file, fileList) {
      this.imgList = fileList;
      if (this.imgList.length > 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }

      console.log(file);
    },
    httpRequest(data) {
      let _this = this;
      // let rd = new FileReader(); // 创建文件读取对象
      let file = data.file;

      // rd.readAsDataURL(file); // 文件读取装换为base64类型
      // console.log(data);

      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', file);
      uploadFile(formData).then(res => {
        this.imgList.push({ url: res.data.path });
        console.log(this.imgList);
        if (this.imgList.length > 4) {
          this.fiveMore = true;
          this.fiveLess = false;
        } else {
          this.fiveMore = false;
          this.fiveLess = true;
        }
      });
    },
    handleBeforeUpload(file) {
      let that = this;
      console.log(that.imgList, this.fiveMore, 'fiveMore', this.fiveLess, 'fiveLess');

      if (
        !(
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif' ||
          file.raw.type === 'image/jpg' ||
          file.raw.type === 'image/jpeg'
        )
      ) {
        this.$message.error('上传文件类型必须是图片!');
      } else {
        // let reader = new FileReader();
        // reader.onload = function (e) {
        //   that.imgList.push({ url: reader.result });
        // };
        // reader.readAsDataURL(file.raw);
      }
      console.log(that.imgList, this.fiveMore, 'fiveMore', this.fiveLess, 'fiveLess');
    }
  }
};
</script>
<style lang="scss" scoped>
.titleName {
  text-align: center;
  margin-bottom: 30px;
}
.titleName > p {
  color: #2454b3;
  font-size: 20px;
  display: inline-block;
}
.messageBox {
  background: #fafafa;
  padding: 20px;
  padding-left: 32px;
  .detailTitle {
    color: rgb(144, 147, 153);
  }
  margin-bottom: 20px;
}
.messageBox > div > div {
  display: inline-block;
  width: 50%;
}
.messageBox > div > div:nth-child(1) {
  margin-bottom: 10px;
}
.messageBox > div > div > span {
  margin-right: 10px;
}
</style>
<style lang="scss">
.showBtn {
  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
  }
}
.noneBtn {
  .el-upload--picture-card {
    display: none !important;
  }
}

.noneBtn >>> .el-icon-plus {
  display: none !important;
}
</style>
